<template>
  <div class="AlarmLevel">
    <el-row :style="{padding: '20px', backgroundColor: '#fff'}">
      <el-col :span="24">
        <!-- v-btnPermission:add -->
        <el-button
          v-btnPermission:add
          type="primary"
          icon="el-icon-plus"
          @click="add">{{
            $t("add")
          }}</el-button>
        <!-- v-btnPermission:edit -->
        <el-button
          v-btnPermission:edit
          :disabled="UpdateDisabled"
          type="primary"
          icon="el-icon-edit"
          @click="modify"
        >{{
          $t("modify")
        }}</el-button>
        <!-- v-btnPermission:delete -->
        <el-button
          v-btnPermission:delete
          :disabled="DeleteDisabled"
          type="danger"
          icon="el-icon-delete"
          @click="doDelete"
        >{{
          $t("delete")
        }}</el-button>
      </el-col>
    </el-row>
    <!-- 表单部分 -->
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <alarmLevelModel ref="alarmLevelModel" @initList="initList"/>
  </div>
</template>

<script>
import { getList, doDelete } from '@/api/alarm/level'
import mySetting from '@/mixins/mySetting'
import alarmLevelModel from './components/TheModel.vue'
export default {
  name: 'AlarmLevel',
  components: { alarmLevelModel },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'alarmLevel', label: this.$t('AlarmLevel') },
        { prop: 'description', label: this.$t('description') },
        { prop: 'actions', label: this.$t('alarmAction') },
        { prop: 'createTime', label: this.$t('createTime') }
      ],
      tableLoading: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const res = await getList(this.listQuery)
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    add() {
      this.$refs.alarmLevelModel.handleOpen()
    },
    modify() {
      this.$refs.alarmLevelModel.handleOpen(this.multipleSelection[0])
    },
    // 删除
    doDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map(ele => ele.id)
        doDelete({ ids }).then(res => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    getList(value) {
      this.listQuery = value
      this.initList()
    }
  }
}
</script>

